<template>
  <div
    class="flex w-full heading-s-medium rounded-xl hover:bg-c-grey-2xs hover:text-c-grey-3xl"
    :class="[{ 'text-c-grey-2xl': !checked }, { 'text-c-grey-3xl': checked }]"
  >
    <input
      :id="label"
      class="Radio"
      type="radio"
      :name="name"
      :checked="checked"
      :value="value"
      @input="handleInput"
    />
    <label :for="label" class="w-full cursor-pointer select-none py-3 px-3">{{
      label
    }}</label>
  </div>
</template>

<script setup lang="ts">
interface Props {
  label: string
  checked: boolean
  value: string
  name: string
}
const props = withDefaults(defineProps<Props>(), {
  label: 'Label',
  checked: false,
  value: '',
  name: ''
})
const emit = defineEmits(['updateRadioGroup'])
const { label, checked, value, name } = toRefs(props)

const handleInput = (e: Event) => {
  emit('updateRadioGroup', {
    value: value.value,
    checked: (e.target as HTMLInputElement).checked
  })
}
</script>

<style scoped lang="scss">
$component: '.Radio';

#{$component} {
  z-index: -1;
  opacity: 0;
  position: absolute;

  + label {
    display: inline-flex;
    align-items: center;
    text-overflow: ellipsis;

    &::before {
      content: '';
      background-image: url('~/assets/icons/radio_icon_unchecked_default.svg');
      height: 16px;
      width: 16px;
      margin-right: 8px;
    }
  }

  &:hover + label::before {
    content: '';
    background-image: url('~/assets/icons/radio_icon_unchecked_hover.svg');
    height: 16px;
    width: 16px;
    margin-right: 8px;
  }

  &:checked + label::before {
    content: '';
    background-image: url('~/assets/icons/radio_icon_checked.svg');
    height: 16px;
    width: 16px;
  }
}
</style>
